import { Layout, Menu, MenuProps } from 'antd';
import { Content, Header } from 'antd/es/layout/layout';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();
  const pathname = useLocation();
  const activeKey = pathname.pathname.split('/').pop() || 'home';
  const items: MenuProps['items'] = [
    {
      key: 'home',
      label: '首页',
      onClick: () => {
        if (activeKey !== 'home') {
          navigate('/admin/home');
        }
      },
    },
    {
      key: 'user',
      label: '用户管理',
      onClick: () => {
        if (activeKey !== 'user') {
          navigate('/admin/user');
        }
      },
    },
    {
      key: 'course',
      label: '课程管理',
      onClick: () => {
        navigate('/admin/course');
      },
    },
    {
      key: 'review',
      label: '评论管理',
      onClick: () => {
        navigate('/admin/review');
      },
    },
  ];
  return (
    <Layout className="w-[100vw] h-[100vh]">
      <Header
        style={{
          position: 'sticky',
          top: 0,
          zIndex: 1,
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          backgroundColor: '#fff',
        }}
      >
        <div className="w-1/3 text-2xl font-bold">中国传统节日课堂后台管理系统</div>
        <Menu
          theme="light"
          mode="horizontal"
          defaultSelectedKeys={[activeKey]}
          items={items}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
      <Content style={{ padding: '24px 48px' }}>
        <div
          style={{
            padding: 24,
            minHeight: 380,
            backgroundColor: '#fff',
            height: 'calc(100vh - 126px)',
            overflow: 'auto',
          }}
        >
          <Outlet />
        </div>
      </Content>
    </Layout>
  );
};

export default Home;
